<template>
	<view class="studyDetailPage">
		<!-- <u-status-bar></u-status-bar> -->
		<!-- <u-navbar @leftClick="goCustomNavBack" title=" " bgColor="transparent" :autoBack="true" leftIconColor="#fff"
			titleStyle="color:#fff;text">
		</u-navbar> -->
		<view class="studyContent" v-if="isLoad" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">

			<u-swiper :list="swiperList" imgMode="scaleToFill" indicator indicatorMode="dot" circular height="60vw"
				radius="0px">
			</u-swiper>
			<!-- <u-sticky offset-top="0">
				<view class="videoContent">
					<video :src="videoUrl" :muted="true" :show-mute-btn="true" play-btn-position="center"
						:autoplay="selectIndex===0?false:true" :enable-play-gesture="true" :show-casting-button="true" :show-screen-lock-button="true"
						:show-snapshot-button="true" style="width: 100vw;height: 60vw;" @play="doWatch"
						@ended="watchEnd"></video>
				</view>
				
			</u-sticky> -->
			<view class="course-title">{{courseInfo.curriculumName}}</view>
			<!-- 切换 -->
			<!-- <u-subsection activeColor="#0157FA" inactiveColor="#333" bgColor="#F4F4F4" mode="subsection" fontSize="30rpx" :list="tabList" :current="curNow" @change="sectionChange"></u-subsection> -->
			<view class="nav">
				<view class="navBtn" :class="{active : curNow == 1}" @click="navBtnClick(1)">简介</view>
				<view class="navBtn" :class="{active : curNow == 2}" @click="navBtnClick(2)">目录</view>
				<view class="navBtn" :class="{active : curNow == 3}" @click="navBtnClick(3)">推荐</view>
			</view>
			<!-- 切换 end -->
			<view class="videoList" v-if="curNow == 1">
				<view class="detailContent">
					<u-parse style="width: 100%;word-break: break-all;" :content="courseInfo.curriculumBrief"></u-parse>
				</view>
			</view>
			<view class="videoList" v-if="curNow == 2">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
					v-if="!list.length && !isLoading" text="没有视频"></u-empty>
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="listBox" @click.stop="expandToggle(index)" v-if="!isDoc(item.uploadVideo)">
						<view class="index">{{index+1}}</view>
						<view class="detail">
							<view class="name">{{item.courseName}}
							</view>
							<view class="content">
								<view class="count">
									时长：{{item.duration||'未知'}}
								</view>
							</view>
						</view>
						<view class="openBtn" v-if="item.list.length > 0">
							<view class="extext" v-if="isExpands[index]"></view>
							<view class="extext" v-else></view>
							<view class="icon-arrow-box" :class="{reverse: isExpands[index]}">
								<u--image src="/static/growup/9.png" shape="square" mode="aspectFill" width="19rpx"
									height="19rpx" class="icon-arrow">
								</u--image>
							</view>
						</view>
					</view>
					<!-- 文档模板 -->
					<view class="listBox docBox" @click="openFile(item.id, item.uploadVideo)" v-else>
						<view class="index">{{index+1}}</view>
						<view class="detail">
							<view class="image">
								<u--image :src="getImgUrl(item.uploadVideo).imageUrl" shape="square" mode="aspectFill"
									width="56rpx" height="56rpx">
								</u--image>
							</view>
							<view class="name">{{item.courseName}}</view>
							<view class="documentBtn color0" @click.stop="sendEmail(item)" v-if="isSendArr.indexOf(item.id)==-1">
								发送邮箱</view>
						</view>
						<view class="openBtn" @click.stop="expandToggle(index)" v-if="item.list.length > 0">
							<view class="extext" v-if="isExpands[index]"></view>
							<view class="extext" v-else></view>
							<view class="icon-arrow-box" :class="{reverse: isExpands[index]}">
								<u--image src="/static/growup/9.png" shape="square" mode="aspectFill" width="19rpx"
									height="19rpx" class="icon-arrow">
								</u--image>
							</view>
						</view>
					</view>
					<view class="childVideo" :class="{expand: isExpands[index]}">
						<view class="detail" v-for="(item1,index1) in item.list" :key="index1"
							@click="changeVideo(item1,index1, 1)">
							<view class="name">{{item1.courseName}}
							</view>
							<view class="content">
								<view class="count">
									时长：{{item1.duration||'未知'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="list.length" :status="isFinish?'nomore':'loading'" loading-text="正在加载"
					loadmore-text="加载更多" nomore-text="没有更多了" color="#d0d0d0" />
			</view>
			<view class="videoList" v-if="curNow == 3">
				<view class="container" v-for="(item,index) in courseInfo.dcckCurriculumRecommends" :key="item.id"
					@click="toDetail(item.id)">
					<view class="leftBox">
						<u--image :src="item.image" shape="square" mode="scaleToFill" width="170rpx" height="230rpx">
						</u--image>
					</view>
					<view class="rightBox">
						<view class="title">
							{{item.curriculumName}}
						</view>
						<view class="rightBoxInfo">
							<text style="padding-right:10rpx;border-right:1px solid #C2C2C2;">{{item.speakNum}}讲</text>
							<text style="padding-left:10rpx;">{{item.studyNum}}人已学习</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="showExchange" :round="10" mode="bottom" @close="doClose">
			<view class="exchangePanel">
				<view class="title">积分兑换</view>
				<view class="cost">{{exchangeInfo.vpoints}}
					<view class="unit">积分</view>
				</view>
				<view class="detail">
					<view class="userScore" v-if="exchangeInfo.canExchange">当前积分{{userScore}}</view>
					<view class="userScore" v-if="!exchangeInfo.canExchange">当前积分不足，请到任务中心获取积分</view>
					<view class="vBtn" @click="doExchange(exchangeInfo)">{{exchangeInfo.btnText}}</view>
				</view>
			</view>
		</u-popup>
		<view class="solutionOperate">
			<view class="operateItem specialItem" @click="collect">
				<u--image src="/static/solution/2.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx"
					v-if="!courseInfo.isCollection">
				</u--image>
				<u--image src="/static/solution/22.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx"
					v-else>
				</u--image>
				<view class="text">收藏</view>
			</view>
			<view class="operateItem specialItem" @click="showShareContent=true">
				<u--image src="/static/solution/1.png" shape="square" mode="aspectFill" width="32rpx" height="32rpx">
				</u--image>
				<view class="text">分享</view>
			</view>
			<view class="operateItem" v-if="courseInfo.isExchange">
				<view class="signbutton">已兑换</view>
			</view>
			<view class="operateItem" v-else @click="doChangeAll">
				<view class="signbutton">积分兑换</view>
			</view>
		</view>
		<u-popup :show="showShareContent" :round="10" mode="bottom" @close="closeShare" @open="openShare">
			<view class="shareContent">
				<view class="title">分享到</view>
				<view class="shareInfo">
					<button class="shareItem" open-type="share">
						<u--image src="/static/share/2.png" radius="50%" shape="square" mode="aspectFill" width="106rpx"
							height="106rpx">
						</u--image>
						<view class="itemTitle">微信</view>
					</button>
					<button class="shareItem" @click="goDiscuss">
						<u--image src="/static/share/1.png" radius="50%" shape="square" mode="aspectFill" width="106rpx"
							height="106rpx">
						</u--image>
						<view class="itemTitle">社区内发帖</view>
					</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: "",
				baseUrl: this.$api.baseUrl,
				isLoad: false,
				ascending: true,
				showExchange: false,
				exchangeInfo: {
					cost: "0",
					canExchange: false,
					btnText: "做任务"
				},
				userScore: 0,
				list: [],
				pageNo: 1,
				pageSize: 100,
				total: 0,
				isFinish: false,
				isLoading: false,
				userId: "",
				videoUrl: "",
				videoId: "",
				playArr: [],
				hasLoad: false,
				selectIndex: 0,
				isExpands: [],
				// tabList: ['简介', '目录', '推荐'],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				curNow: 1,
				recommendList: [{
						id: 10001,
						title: '机器视觉入门课程系列备份',
						imgurl: '/static/logo.png',
						courseNum: 10,
						studyNum: 1000
					},
					{
						id: 10002,
						title: '机器视觉入门课程系列备份',
						imgurl: '/static/logo.png',
						courseNum: 10,
						studyNum: 1000
					},
					{
						id: 10003,
						title: '机器视觉入门课程系列备份',
						imgurl: '/static/logo.png',
						courseNum: 10,
						studyNum: 1000
					}
				],
				courseInfo: {},
				swiperList: [],
				formInfo: {
					name: '',
					phone: '',
					email: ''
				},
				showPopup: false,
				showShareContent: false,
				paddingBottomHeight: 150,
				myEmail: "",
				isSendArr: [],
			}
		},
		onLoad(option) {
			uni.getStorage({
				key: "userInfo",
				success: (userInfo) => {
					this.userId = userInfo.data.id;
					this.$request.get(this.$api.getUserById, {
						id: this.userId
					}).then(result => {
						this.userScore = result.result.integral;
						this.myEmail = result.result.educationMailbox
						uni.hideLoading()
					})
					this.id = option.id;
					this.initData();
				},
			})
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							this.paddingBottomHeight = 40 + 150;
						}
					})
				}
			});
		},
		onReachBottom() {
			// if (!this.isLoading && !this.isFinish) {
			// 	this.pageNo++;
			// 	this.initData();
			// }
		},
		methods: {
			openFile(id, url) {
				if (this.courseInfo.isExchange) {
					uni.showLoading({
						title: '文件加载中',
						mask: true
					})
					this.$appFunc.openFile(id, url).then(res => {
						uni.hideLoading()
					}).catch((e) => {
						console.log(e)
						uni.hideLoading()
						this.$appFunc.msg('打开失败')
					})
				} else {
					this.doChangeAll()
				}
			},
			sendEmail(item) {
				if (this.myEmail) {
					this.isSendArr.push(item.id);
					this.$request.get(this.$api.sendEmailFile, {
						email: this.myEmail,
						title: item.courseName,
						content: "点击附件下载文件",
						filepath: this.$appFunc.getFileUrl(item.uploadVideo),
						filename: item.uploadVideo
					}).then(res => {
						uni.showToast({
							icon: "success",
							title: "发送成功"
						})
						uni.hideLoading()
					})
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '您还没有绑定邮箱，请去个人中心绑定邮箱账号',
						confirmText: "前去绑定",
						cancelText: "放弃领取",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/myInfo/myInfo"
								})
							} else if (res.cancel) {
								uni.showToast({
									icon: "none",
									title: "已取消发送"
								})
							}

						}
					})
				}

			},
			collect() {
				let url = ""
				if (this.courseInfo.isCollection) {
					url = this.$api.courseCancelCollection
				} else {
					url = this.$api.courseCollection
				}
				this.$request.get(url, {
					id: this.courseInfo.id,
					userId: this.userId
				}).then(res => {
					uni.hideLoading()
					if (!this.courseInfo.isCollection) {
						this.courseInfo.isCollection = true;
						uni.showToast({
							icon: "success",
							title: "收藏成功",
							duration: 3000
						})
						return;
					}
					if (this.courseInfo.isCollection) {
						this.courseInfo.isCollection = false;
						uni.showToast({
							icon: "success",
							title: "取消收藏成功",
							duration: 3000
						})
						return;
					}

				})
			},
			goDiscuss() {
				uni.setStorage({
					key: "shareData",
					data: {
						id: this.courseInfo.id,
						types: "5"
					},
					success: () => {
						uni.switchTab({
							url: "/pages/discuss/discuss"
						})
					}
				})
			},
			expandToggle(index) {
				this.$set(this.isExpands, index, !this.isExpands[index])
			},
			toDetail(id) {
				if (this.id != id) {
					this.id = id
					this.isLoad = false
					this.courseInfo = {}
					this.swiperList = []
					this.initData()
				}
			},
			closeShare() {
				this.showShareContent = false;
			},
			openShare() {
				this.showShareContent = true;
			},
			isDoc(url) {
				if (!url) return false
				let arr = url.split(".");
				let type = arr[arr.length - 1];
				let docTypes = ['zip', 'doc', 'docx', 'pdf', 'xls', 'xlsx', 'ppt']
				if (docTypes.indexOf(type) !== -1) {
					return true
				} else {
					return false
				}
			},
			getImgUrl(item) {
				let that = this
				let arr = item.split(".");
				let type = arr[arr.length - 1];
				let obj = {};
				switch (type) {
					case "zip":
						obj.imageUrl = '/static/growup/2.png'
						// obj.colorIndex = 0
						break;
					case "doc":
						obj.imageUrl = '/static/growup/3.png'
						// obj.colorIndex = 2
						break;
					case "docx":
						obj.imageUrl = '/static/growup/3.png'
						// obj.colorIndex = 2
						break;
					case "pdf":
						obj.imageUrl = '/static/growup/4.png'
						// obj.colorIndex = 1
						break;
					case "xls":
						obj.imageUrl = '/static/growup/5.png'
						// obj.colorIndex = 0
						break;
					case "xlsx":
						obj.imageUrl = '/static/growup/5.png'
						// obj.colorIndex = 0
						break;
					case "ppt":
						obj.imageUrl = '/static/growup/6.png'
						// obj.colorIndex = 0
						break;
					default:
						obj.imageUrl = '/static/growup/8.png'
						// obj.colorIndex = 0
						break;
				}
				return obj
			},
			initData(isRefresh) {
				this.isLoading = true;
				Promise.all([
					this.$request.get(this.$api.studyDetail, {
						type: this.ascending ? '1' : '2',
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						curriculumId: this.id,
						userId: this.userId
					}),
				]).then(res => {
					uni.hideLoading()
					if (isRefresh) {
						uni.stopPullDownRefresh()
					}
					this.isLoading = false;
					let isExpands = []
					for (let i = 0; i < res[0].result.records.length; i++) {
						isExpands.push(true)
					}
					this.isExpands = this.isExpands.concat(isExpands)
					this.list = res[0].result.records;
					//首次加载找到一个免费的视频或者已经兑换的视频进行加载
					if (!this.isLoad) {
						this.list.map(item => {
							if (item.isExchange || item.vpoints === "0" && !this.videoUrl && !this
								.hasLoad) {
								this.hasLoad = true;
								// uni.downloadFile({
								// 	url: this.baseUrl + '/sys/common/static/' + item.uploadVideo,
								// 	success: (res) => {
								// 		console.log(res)
								// 		var temp = res.tempFilePath
								// 		this.videoUrl = temp
								// 		this.videoId = item.id
								// 	}
								// })
								this.videoUrl = item.uploadVideo
								this.videoId = item.id
							}
						})
					}
					this.total = res[0].result.total;
					if (this.pageNo * this.pageSize < this.total) {
						this.isFinish = false
					} else {
						this.isFinish = true
					}
					this.isLoad = true;

					let index = this.playArr.indexOf(this.id);
					if (index === -1) {
						this.$request.get(this.$api.videoCountList, {
							id: this.id,
							userId: this.userId
						}).then(res => {
							console.log("阅读量+1")
							this.playArr.push(this.id)
							this.courseInfo = res.result
							this.swiperList = this.courseInfo.images ? this.courseInfo.images.split(',') :
								[]
							console.log('this.swiperList', this.swiperList)
							uni.hideLoading()
						})
					}
				})
			},
			doSearch() {
				this.isFinish = false;
				if (!this.isLoading) {
					this.pageNo = 1;
					this.list = [];
					this.initData(true);
				}
			},
			doFilter() {
				this.ascending = !this.ascending;
				this.doSearch();
			},
			doChange(item) {
				if (item.vpoints === '0') return;
				this.showExchange = true;
				if (item.vpoints > this.userScore) {
					this.exchangeInfo.id = item.id;
					this.exchangeInfo.canExchange = false;
					this.exchangeInfo.btnText = "做任务"
					this.exchangeInfo.vpoints = item.vpoints || item.vsPoints
				} else {
					this.exchangeInfo.id = item.id;
					this.exchangeInfo.canExchange = true;
					this.exchangeInfo.btnText = "立即兑换"
					this.exchangeInfo.vpoints = item.vpoints || item.vsPoints
				}
			},
			doChangeAll() {
				if (this.courseInfo.isExchange) {
					this.$appFunc.msg('您已兑换该课程')
					return
				}
				this.showExchange = true;
				let vpoints = 0
				if (this.list) {
					this.list.forEach(item => {
						vpoints += Number(item.vpoints)
						item.list.forEach(citem => {
							vpoints += Number(citem.vsPoints)
						})
					})
				}
				if (vpoints > this.userScore) {
					this.exchangeInfo.id = this.id;
					this.exchangeInfo.canExchange = false;
					this.exchangeInfo.btnText = "做任务"
					this.exchangeInfo.vpoints = vpoints
				} else {
					this.exchangeInfo.id = this.id;
					this.exchangeInfo.canExchange = true;
					this.exchangeInfo.btnText = "立即兑换"
					this.exchangeInfo.vpoints = vpoints
				}
			},
			doClose() {
				this.showExchange = false
			},
			refreshUser() {
				this.isFinish = false;
				if (!this.isLoading) {
					this.isLoading = true;
					this.$request.get(this.$api.videoCountList, {
						id: this.id,
						userId: this.userId
					}).then(res => {
						this.isLoading = false;
						this.isFinish = true
						this.$request.get(this.$api.getUserById, {
							id: this.userId
						}).then(result => {
							this.userScore = result.result.integral;
						})
						uni.showToast({
							title: "兑换成功",
							icon: "none"
						})
						this.showExchange = false;
						this.courseInfo = res.result
						uni.hideLoading()
					})
					// Promise.all([

					// 	this.$request.get(this.$api.studyDetail, {
					// 		type: this.ascending ? '1' : '2',
					// 		pageNo: this.pageNo,
					// 		pageSize: this.pageSize,
					// 		curriculumId: this.id,
					// 		userId: this.userId
					// 	}),
					// ]).then(res => {

					// })
				}
			},
			doExchange(item) {
				if (item.vpoints > this.userScore) {
					uni.navigateTo({
						url: "/pages/taskCenter/taskCenter"
					})
				} else {
					this.$request.post(this.$api.doExchange, {
						integral: item.vpoints,
						otherId: item.id,
						userId: this.userId,
						exchangeType: 3
					}).then(res => {
						uni.hideLoading()
						this.refreshUser();
					})
				}
			},
			//列表点击切换
			changeVideo(item, index, isExpand = 0) {
				// 一级菜单 下面有子课程就不播放 撤回
				if (!item.uploadVideo) {
					return
				}
				this.videoUrl = this.$appFunc.getFileUrl(item.uploadVideo)
				if (this.courseInfo.isExchange) {
					/* uni.downloadFile({
						url: this.baseUrl + '/sys/common/static/' + item.uploadVideo,
						success: (res) => {
							var temp = res.tempFilePath
							this.videoUrl = temp
							this.videoId = item.id
						}
					}) */
					// this.videoUrl = item.uploadVideo
					// this.videoId = item.id
					// this.selectIndex = index
					uni.navigateTo({
						url: "/pages/courseDetail/courseDetail?id=" + this.id + "&videoId=" + item.id
					})
				} else {
					// this.doChange(item)
					this.doChangeAll()
				}
			},
			//视频点击播放
			doWatch() {
				let index = this.playArr.indexOf(this.videoId);
				if (index === -1) {
					this.$request.get(this.$api.videoCount, {
						id: this.videoId,
						userId: this.userId
					}).then(res => {
						console.log("阅读量+1")
						this.playArr.push(this.videoId)
						uni.hideLoading()
					})
				}
			},
			//播放结束
			watchEnd() {
				if (this.selectIndex !== this.list.length - 1) {
					uni.showToast({
						title: "即将播放：" + (this.list[this.selectIndex + 1].courseName),
						icon: "none"
					})
					setTimeout(() => {
						this.changeVideo(this.list[this.selectIndex + 1], this.selectIndex + 1)
					}, 2000)
				}
				this.$request.get(this.$api.videoGetintegral, {
					id: this.videoId,
					userId: this.userId
				}).then(res => {
					console.log("观看结束", res)
					uni.hideLoading()
				})
			},
			//tab目录切换
			// sectionChange(index) {
			// 	this.curNow = index;
			// }
			navBtnClick(index) {
				this.curNow = index
			}
		}
	}
</script>

<style lang="scss">
	.studyDetailPage {
		min-height: 100vh;
		background-color: #fff;

		.u-navbar--fixed {
			z-index: 999 !important;
		}

		// .u-subsection__item{
		// 	border-radius:25rpx;
		// }
		.studyContent {
			.nav {
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-bottom: 16rpx;

				.navBtn {
					width: 24vw;
					margin: 0 4vw;
					display: block;
					background-color: #eee;
					font-size: 30rpx;
					border-radius: 60rpx;
					color: #333;
					text-align: center;
					padding: 10rpx 0;
				}

				.active {
					background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
					color: #fff;
				}
			}

			.videoContent {
				width: 100vw;
				display: flex;
				justify-content: center;

				.u-swiper {
					width: 100%;
				}
			}

			.videoTitle {
				padding: 0 40rpx;
				display: flex;
				flex-direction: column;
				background-color: #fff;

				.titleContent {
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #eee;
					background-color: #fff;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 88rpx;
					}

					.titleOperate {
						display: flex;
						justify-content: flex-end;
						color: #707070;
						align-items: center;
						line-height: 88rpx;
						font-size: 26rpx;

						.ascendIcon {
							margin-left: 10rpx;
						}

						.descend {
							transform: rotate(180deg);
						}
					}
				}
			}

			.videoList {
				padding-bottom: 60rpx;
				display: flex;
				flex-direction: column;
				background-color: #fff;

				.container {
					display: flex;
					justify-content: space-between;
					padding: 0 40rpx;
					margin: 36rpx 0;

					.rightBox {
						height: 230rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 66rpx;
						width: calc(100% - 236rpx);
						padding: 30rpx 0rpx;
						box-sizing: border-box;

						.title {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							word-break: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #333;
							font-size: 32rpx;
							line-height: 1.5;
						}

						.rightBoxInfo {
							margin-bottom: 12rpx;
							font-size: 26rpx;
							color: #C2C2C2;
						}
					}
				}

				.detailContent {
					display: inline-block;
					position: relative;
					width: 670rpx;
					overflow-x: hidden;
					overflow-y: auto;
					padding: 40rpx;
				}

				.list {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					align-items: center;

					.listBox {
						display: flex;
						justify-content: flex-start;
						padding: 20rpx 40rpx;
						border-bottom: 1px solid #eee;
						align-items: center;
					}

					.index {
						width: 40rpx;
					}

					.docBox {
						.detail {
							flex-direction: row;
							align-items: center;
						}

						.image {
							padding-right: 30rpx;
						}
						.name {
							padding-right: 50rpx;
						}
					}

					.detail {
						display: flex;
						justify-content: flex-start;
						flex-direction: column;
						width: calc(100% - 120rpx);
						line-height: 50rpx;

						.name {
							font-weight: 500;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
						}

						.content {
							display: flex;
							flex-wrap: nowrap;
							justify-content: flex-start;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;

							.count {
								// padding-left: 40rpx;
							}
						}
					}

					.status {
						padding: 0 12rpx;
						font-size: 22rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #777;
						background: #eee;
						border-radius: 20rpx;
						margin-left: 10rpx;
					}

					.openBtn {
						color: #fff;
						font-size: 22rpx;
						// background:linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
						// border-radius: 60rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 110rpx;
						height: 44rpx;
						line-height: 44rpx;

						.icon-arrow-box {
							transform: rotate(180deg);
						}

						.icon-arrow-box.reverse {
							transform: rotate(0);
						}

						.extext {
							padding-right: 10rpx;
						}
					}

					.orange {
						color: #EC6C2F;
					}

					.childVideo {
						height: 0;
						margin: 0 30rpx 0 73rpx;
						width: calc(100vw - 103rpx);
						transition: all 0.3s ease-in;
						overflow: hidden;

						.name {
							color: #777;
						}

						&:not(.expand) {
							display: block;
							height: auto;
						}

						.detail {
							border-bottom: 1px solid #eee;
							margin-left: 32rpx;
							padding: 15rpx 13rpx;
							position: relative;
						}

						.detail:before {
							content: '';
							width: 14rpx;
							height: 14rpx;
							border-radius: 50%;
							background-color: #D8D8D8;
							display: inline-block;
							position: absolute;
							top: 50%;
							left: -24rpx;
							transform: translateY(-50%);
						}
					}

				}
			}
		}


		.exchangePanel {
			display: flex;
			text-align: center;
			flex-direction: column;

			.title {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;
				height: 100rpx;
				line-height: 100rpx;
			}

			.cost {
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				font-size: 46rpx;
				color: #EC6C2FFF;
				display: flex;
				flex-wrap: nowrap;
				justify-content: center;
				border-bottom: 1rpx solid #eee;
				height: 100rpx;
				line-height: 100rpx;

				.unit {
					font-size: 24rpx;
					position: relative;
					top: 6rpx;
					left: 2rpx;
					color: #333333;
				}
			}

			.detail {
				line-height: 100rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding-bottom: 40rpx;

				.userScore {
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					font-size: 30rpx;
				}

				.vBtn {
					background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
					border-radius: 48rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					font-size: 34rpx;
					height: 96rpx;
					width: 680rpx;
				}
			}
		}

		.solutionOperate {
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100vw;
			box-shadow: 0px -2px 4px 1px rgba(0, 0, 0, 0.04);
			background: #ffffff;
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			padding-left: 20rpx;
			padding-right: 20rpx;
			box-sizing: border-box;

			.operateItem {
				display: flex;
				justify-content: center;
				flex-wrap: nowrap;
				align-items: center;
				font-size: 26rpx;
				padding: 24rpx 0;
				position: relative;

				&:nth-child(1),
				&:nth-child(2) {
					width: 160rpx;
				}

				&:nth-child(3) {
					padding-left: 20rpx;
				}

				.text {
					padding-left: 8rpx;
					display: inline-block;
				}
			}

			.specialItem {
				&:after {
					content: "";
					display: inline-block;
					height: 32rpx;
					width: 1px;
					background-color: #BDBDBDFF;
					position: absolute;
					right: 0;
					top: calc(50% - 16rpx);
				}
			}
		}

		.signbutton {
			background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
			border-radius: 30px;
			// height: 40px;
			width: 350rpx;
			padding: 24rpx 0;
			// line-height: 40px;
			color: #fff;
			text-align: center;
		}

		.shareContent {
			height: 400rpx;

			.title {
				height: 100rpx;
				border-bottom: 1rpx solid #eeeeee;
				text-align: center;
				line-height: 100rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.shareInfo {
				display: flex;
				justify-content: space-around;
				flex-wrap: nowrap;
				padding-top: 40rpx;

				.shareItem {
					display: flex;
					flex-direction: column;
					align-items: center;

					.itemTitle {
						padding-top: 30rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}

		.course-title {
			margin: 30rpx 30rpx 37rpx;
			padding: 0 10rpx 37rpx;
			border-bottom: 1px solid #F4F4F4;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}
		.documentBtn {
			background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
			border-radius: 34rpx;
			height: 50rpx;
			width: 136rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			color: #fff;
			text-align: center;
			flex-shrink: 0;
		}
		.checkDocBtn {
			right:174rpx;
		}
		.color0 {
			background: linear-gradient(180deg, #87C5FC 0%, #247FFF 100%);
		}
		.color1 {
			background: linear-gradient(180deg, #F3D748 0%, #EF7B17 100%);
		}
		.color2 {
			background: linear-gradient(180deg, #F79037 0%, #F24929 100%);
		}
	}
</style>
